<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/avue/2.9.5/index.css">
        <script type="text/javascript" src="../public/cdn/avue/2.9.5/avue.min.js"></script>
    </head>

    <body>
        <div id="app">
            <el-card>
                <avue-form v-model="form"
                              ref="form"
                              :option="option"
                              @submit="handleSubmit">
                </avue-form>
            </el-card>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            components: {},
            data: {
                option: {
                    "column": [{"label": "流水号", "prop": "serialNumber", "span": 24, "detail": true}, {
                        "type": "input",
                        "label": "创建人",
                        "span": 12,
                        "display": true,
                        "prop": "creator",
                        "readonly": false,
                        "disabled": false
                    }, {
                        "type": "input",
                        "label": "创建部门",
                        "span": 12,
                        "display": true,
                        "prop": "creatorDept",
                        "value": "刀锋科技",
                        "readonly": true
                    }, {
                        "type": "datetimerange",
                        "label": "请假时间",
                        "span": 12,
                        "display": true,
                        "format": "yyyy-MM-dd HH:mm:ss",
                        "valueFormat": "yyyy-MM-dd HH:mm:ss",
                        "prop": "datetime",
                        "required": true,
                        "change": ({value}) => {
                            if (!value || value.length == 0) {
                                app.$set(app.form, 'days', undefined)
                            } else {
                                const d1 = Date.parse(value.split(',')[0])
                                const d2 = Date.parse(value.split(',')[1])
                                const day = (d2-d1)/(1*24*60*60*1000)
                                app.$set(app.form, 'days', Number(day.toFixed(2)))
                            }
                        },
                        "dataType": "string",
                        "readonly": false,
                        "disabled": false
                    }, {
                        "type": "number",
                        "label": "请假天数",
                        "span": 12,
                        "display": true,
                        "prop": "days",
                        "required": true,
                        "controls": true,
                        "controlsPosition": "right",
                        "change": ({column,value})=>{
                            if (value) app.$set(app.form, 'reason','请假' + value + '天' )
                            else app.$set(app.form, 'reason', '')
                        },
                        "readonly": true,
                        "disabled": true
                    }, {
                        "type": "textarea",
                        "label": "请假理由",
                        "span": 24,
                        "display": true,
                        "prop": "reason",
                        "required": true,
                        "readonly": true,
                        "disabled": true
                    }, {
                        "label": "附件",
                        "type": "upload",
                        "propsHttp": {"res": "data", "url": "link", "name": "originalName"},
                        "action": "/api/blade-resource/oss/endpoint/put-file",
                        "display": true,
                        "span": 24,
                        "showFileList": true,
                        "multiple": true,
                        "limit": 10,
                        "prop": "attachment",
                        "dataType": "string",
                        "readonly": false,
                        "disabled": false
                    }],
                    "labelPosition": "left",
                    "labelSuffix": "：",
                    "labelWidth": 120,
                    "gutter": 0,
                    "menuBtn": true,
                    "submitBtn": true,
                    "submitText": "提交",
                    "emptyBtn": true,
                    "emptyText": "清空",
                    "menuPosition": "right",
                    "group": []
                },
                "form": {
                    "serialNumber": "Leave2023121700002",
                    "creator": "lzh",
                    "creatorDept": "苏州刀锋",
                    "datetime": "2023-12-18 00:00:00,2024-01-01 00:00:00",
                    "days": 14,
                    "reason": "请假14天",
                    "attachment": "",
                    "applyUser": "1701484991482474498",
                    "applyUserName": "lzh",
                    "copyUser": "1123598821738675204",
                    "assignee": "1123598821738675201,1123598821738675202"
                }
            },
            watch: {},
            created() {},
            mouted() {},
            computed: {},
            methods: {
                handleSubmit (form, done) {
                    this.$message.success(JSON.stringify(form))
                    done()
                }
            }
        })
    </script>
</html>
